<template>
	<div class="header-box">
		<div class="box-txt">
			<div class="box-item" v-for="(item,index) in BoxList" :key='item.id'>
				<img :src="item.boxUrl" />
				<p>{{item.boxtil}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['BoxList'],
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	.header-box {
		width: 100%;
		margin-top: 0.5rem;
		display:  inline-block;
		background-color: #cccccc;
		padding-top: 0.2rem;
		padding-bottom: 0.6rem;
	}
	.box-txt{
		width: 95%;
		text-align: center;
		margin: 0rem auto;	
	}
	.box-item {
		width: 30%;
		float: left;
		margin-top: 0.3rem;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius:  5px;
		margin-left: 0.18rem;
		height: 1.3rem;
	}

	.box-item img {
		position: relative;
		width: 100%;
		border-radius:  5px;
		height: 100%;
	}

	.box-item p {
		position: absolute;
		margin-top: -48px;
		margin-left: 18px;
		color: white;
		font-weight: bold;
		font-size: 18px;
	}
</style>
